<template>
  <div :class="{'mobile-create': showMobilePage}" class="sign-detail-container">
    <div class="sign-detail-content">
      <Title title="基础信息" style="font-size:16px; margin:10px 0 16px; padding-left: 24px"/>
      <el-form ref="formInfo" :model="formInfo" :rules="rules" :label-position="formAlign" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人:" class="no-required grey-label">
              <ToolTip :content="formInfo.creator" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="所属部门"
              prop="departmentId">
              <el-cascader
                v-model="formInfo.departmentId"
                :show-all-levels="false"
                :options="deptTreeList"
                :props="{
                  emitPath:false,
                  value: 'id',
                  label: 'name',
                  checkStrictly: true,
                  multiple: false,
                }"
                popper-class="tag-overflow"
                placeholder="请选择所属部门"
                size="small"
                class="width240"
                collapse-tags
                filterable
                clearable
                @change="handleChangeCache"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <Title title="询单内容" style="font-size:16px; margin-bottom: 16px; padding-left: 24px"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌名称" prop="brandName">
              <el-input v-model="formInfo.brandName" size="small" class="width240" maxlength="50" placeholder="请输入" @change="handleChangeCache"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="formInfo.productName" size="small" class="width240" maxlength="100" placeholder="请输入" @change="handleChangeCache"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="tagName" label="询单标签">
              <el-cascader
                v-model="formInfo.tagName"
                :options="tagTreeList"
                :props="{
                  emitPath: false,
                  value: 'id',
                  label: 'name',
                  children: 'item',
                  multiple: true,
                }"
                :show-all-levels="false"
                filterable
                size="small"
                class="width240 cascader"
                popper-class="ellips-cascader"
                placeholder="请选择询单标签"
                clearable
                collapse-tags
                @change="handleChangeCache">
                <template slot-scope="{ data }">
                  <el-tooltip v-if="data.name.length > 15" placement="top" effect="dark">
                    <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
                    <span class="inline-tag ellipsisOne">{{ data.name }}</span>
                  </el-tooltip>
                  <span v-else>{{ data.name }}</span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望档期" prop="slotTime">
              <el-date-picker
                v-model="formInfo.slotTime"
                :editable="false"
                type="daterange"
                class="width240"
                size="small"
                format="yyyy/MM/dd"
                value-format="timestamp"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleChangeCache"/>
            </el-form-item>
          </el-col>
          <!-- 下单平台和合作形式 -->
          <el-col v-for="(item,index) in formInfo.queryOrderPlatforms" :span="24" :key="item._uuid">
            <platform :ref="`platform-${item._uuid}`" :is-create-new="isCreateNew" v-model="item.queryOrderPlatforms" :index="index" :is-last="index === formInfo.queryOrderPlatforms.length-1" @add="addPlatform" @del="deleteItem"/>
          </el-col>
          <el-col :span="12">
            <el-form-item label="询单截止" prop="queryOrderEndTime" style="margin-bottom: 10px;">
              <el-date-picker
                v-model="formInfo.queryOrderEndTime"
                :picker-options="countdownPickerOptions"
                type="datetime"
                format="yyyy/MM/dd HH:mm"
                value-format="timestamp"
                popper-class="countdown-picker"
                class="width240"
                size="small"
                clearable
                placeholder="请选择时间"
                @change="handleChangeCache"/>
              <div class="countdown-check">
                <el-checkbox v-model="formInfo.autoComplete">时间截止后自动完成询单</el-checkbox>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件" prop="attachment" class="no-required">
              <div class="width240">
                <upAttachment
                  ref="uploadImg"
                  :hide-confirm="true"
                  :file-list="formInfo.attachment"
                  import-api="/common/file/upload"
                  btn-text="上传文件"
                  @complateSetData="complateSetData($event, 'attachment')"
                  @removeFileList="removeFileList($event, 'attachment')" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :style="{'margin-bottom': showMobilePage ? '16px' : formInfo.linkList.length ? '14px' : '4px'}"
              label="服务号通知"
              prop="enableNotification"
              class="no-required"
              style="margin-bottom: 14px">
              <el-radio-group v-model="formInfo.enableNotification" @change="handleChangeCache">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :style="{'margin-bottom': showMobilePage ? '16px' : formInfo.remarks.length ? '14px' : '4px'}"
              label="链接"
              prop="link"
              class="no-required"
              style="margin-bottom: 4px">
              <flyLink
                ref="flyLink"
                :link-list="formInfo.linkList"
                @addItem="addItem('link')"
                @toDelete="toDelete($event,'link')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="特殊备注" prop="remark" class="no-required" style="margin-bottom: 14px;">
              <remarkInput
                ref="remarkInput"
                :remark-list="formInfo.remarks"
                @addItem="addItem('remark')"
                @toDelete="toDelete($event,'remark')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <fixed-pagination>
        <div v-if="saveTime && !showMobilePage" class="save-info">
          <p>已自动保存当前信息</p>
          <p>{{ format(saveTime, 'YYYY/MM/DD HH:mm:ss') }}</p>
        </div>
        <div v-if="!showMobilePage" class="center">
          <el-button v-if="!id || isDraft || isCreateNew" :loading="draftLoading" type="info" size="small" class="back-btn empty-btn-style" @click="saveDraft()">保存草稿</el-button>
          <el-button :loading="addLoading" type="primary" size="small" class="submit-btn" @click="handleValidate">发起询单</el-button>
          <el-button class="back-btn cancel-btn-style" size="small" @click="toBack()">取消</el-button>
        </div>
        <div v-else class="center">
          <MoreOperateBtn>
            <el-dropdown-item v-if="!id || isDraft || isCreateNew" :disabled="draftLoading" style="width:80px;text-align: center" @click.native="saveDraft()">
              <div>保存草稿</div>
            </el-dropdown-item>
            <el-dropdown-item style="width:80px;text-align: center" @click.native="toBack()">
              <div>取消</div>
            </el-dropdown-item>
          </MoreOperateBtn>
          <el-button :loading="addLoading" type="primary" size="small" class="submit-btn" style="flex:1" @click="handleValidate">发起询单</el-button>
        </div>
      </fixed-pagination>
    </div>
    <FlyLinkedAccount
      ref="flyLinkedAccountRef"
      :show-submit-tip="false"
      :brand-name="formInfo.brandName"
      :product-name="formInfo.productName"
      show-notice-status
      is-notice />
  </div>
</template>
<script>
// 组件
import Title from '@/components/Title';
import upAttachment from '@/components/Common/upAttachment/index';
import FlyLinkedAccount from '@/components/FlyLinkedAccount';
import platform from '../components/platform';
import flyLink from '../components/flyLink';
import remarkInput from '../components/remarkInput';
// api methods
import { getDepartmentAll, getTagAll } from '@/api/config';
import { queryOrderCreate, queryOrderEdit, queryOrderInfo } from '@/api/flyNotice';
import ElMessage, { showModal } from '@/utils/message';
import { mapState } from 'vuex';
import { TAG_MODULES } from '@/utils/const';
import mobileCreate from '@/mixins/mobileCreate';
import { generateUUID } from '@/utils/tools';
import { format } from '@/filters/date';
import { createLocalStorage } from '@/utils/storage';

// 缓存 60分钟
const ss = createLocalStorage({ expire: 60 * 60 });
export default {
  components: {
    Title,
    upAttachment,
    FlyLinkedAccount,
    platform,
    flyLink,
    remarkInput
  },
  mixins: [mobileCreate],
  data() {
    return {
      format,
      TAG_MODULES,
      id: '',
      formInfo: {
        creator: '',
        departmentId: '',
        brandName: '',
        productName: '',
        tagName: '',
        autoComplete: true,
        slotTime: [],
        queryOrderPlatforms: [], // 下单平台信息
        queryOrderAdvises: [], // 询单通知表
        remarks: [],
        queryOrderEndTime: '',
        attachment: [],
        linkList: [],
        enableNotification: 1
      },
      isCreateNew: false,
      tagTreeList: [],
      deptTreeList: [],
      rules: {
        departmentId: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        brandName: [{ required: true, trigger: 'blur', message: '请输入品牌名称' }],
        productName: [{ required: true, trigger: 'blur', message: '请输入产品名称' }],
        queryOrderEndTime: [{ required: true, trigger: 'blur', message: '请选择询单截止时间' }],
        slotTime: [{ required: true, trigger: 'change', message: '请选择期望档期' }],
        tagName: [{ required: true, trigger: 'change', message: '请选择标签' }],
        enableNotification: [{ required: true, trigger: 'change', message: '请选择服务号通知' }]
      },
      isDraft: false,
      addLoading: false,
      draftLoading: false,
      createType: -1,
      remarkCache: '',
      countdownPickerOptions: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
      },
      isInit: true,
      saveTimer: null, // 数据保存定时器
      saveTime: null, // 保存时间
      versionCreateTime: null // 版本保存时间
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  watch: {
    'formInfo.queryOrderEndTime'() {
      this.setSelectableTime();
    }
  },
  created() {
    // 账号资源页面快速发起时需要选中账号
    if (this.$route.query.fromResource) {
      this.$refs['flyLinkedAccountRef'].setBoundAccountData();
    }
    this.id = Number(this.$route.query.id);
    this.isDraft = Boolean(this.$route.query.isDraft);
    this.isCreateNew = Boolean(this.$route.query.createNew);
    this.createType = this.$route.query.createType;
    this.load();
    if (this.id) { // 编辑或者再次发起（复制）
      this.getInfo();
    } else { // 新建，如果是再次发起（复制）则获取上个询单内容
      this.addPlatform();
      this.initData();
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'flyNoticeDetail') {
      to.meta.isDetail = true;
    } else {
      to.meta.isDetail = false;
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    if (this.$route.query.fromResource) {
      sessionStorage.removeItem('inBoundAccountData');
    }
    next();
  },
  mounted() {
    this.getFormTimeOut = setTimeout(() => {
      this.getFormData();
    }, 500);
  },
  beforeDestroy() {
    this.clearSaveTimer();
    clearTimeout(this.getFormTimeOut);
    this.getFormTimeOut = null;
  },
  methods: {
    // 页面销毁清除定时器
    clearSaveTimer() {
      clearInterval(this.saveTimer);
      this.saveTimer = null;
    },
    handleChangeCache() {
      if (!this.isInit) {
        this.saveCache();
      }
      this.isInit = false;
    },
    saveCache: _.throttle(function() {
      this.setFormData();
    }, 2000),
    setFormData() {
      const data = this.$refs['flyLinkedAccountRef'].selectedData;
      const params = _.cloneDeep(this.formInfo);
      params.queryOrderAdvises = data;
      ss.set('flyNoticeCache', params);
      this.saveTime = new Date().getTime();
    },
    getFormData() {
      const data = ss.get('flyNoticeCache');
      if (data && (this.id === data.id || (!this.id && !data.id))) {
        showModal('请确认是否恢复上次所填数据？', '', { closeOnClickModal: false }).then(() => {
          this.formInfo = data;
          this.$refs['flyLinkedAccountRef'].setAccountData(data.queryOrderAdvises || []);
          ss.remove('flyNoticeCache');
        });
      }
    },
    load() {
      this.queryDeptTreeList();
      this.queryTagTreeList();
    },
    initData() {
      this.formInfo.creator = this.userInfo.userName;
      this.formInfo.departmentId = this.userInfo.currentDeptIds[0];
    },
    // 限制选择日期的小时分钟范围
    setSelectableTime() {
      const { queryOrderEndTime } = this.formInfo;
      if (!queryOrderEndTime) return;
      const date = moment(queryOrderEndTime).startOf('day').format('x');
      const nowDate = moment().startOf('day').format('x');
      // 获取精确到分钟的时间戳
      let currTime = date <= nowDate ? Date.now() : queryOrderEndTime;
      currTime -= currTime % (60 * 1000);
      if (date <= nowDate) {
        this.$set(this.countdownPickerOptions, 'selectableRange', `${moment().format('HH:mm:ss')} - 23:59:59`);
        currTime > queryOrderEndTime && this.$set(this.formInfo, 'queryOrderEndTime', currTime);
      } else {
        this.$set(this.countdownPickerOptions, 'selectableRange', '00:00:00 - 23:59:59');
        this.$set(this.formInfo, 'queryOrderEndTime', currTime);
      }
    },
    // 获取详情
    getInfo() {
      queryOrderInfo(this.id, { createType: this.createType }).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.formInfo = res.data;
        this.formInfo.remarks.map(el => { el._uuid = generateUUID(); });
        this.remarkCache = _.cloneDeep(this.formInfo.remarks);
        this.handleLinks();
        if (this.isCreateNew) { // 再次发起（复制）回填新的创建人信息
          this.formInfo.creator = this.userInfo.userName;
          this.formInfo.departmentId = this.userInfo.currentDeptIds[0];
        }
        this.formInfo.queryOrderEndTime = this.formInfo.queryOrderEndTime ? this.formInfo.queryOrderEndTime * 1000 : '';
        this.formInfo.slotTime = this.formInfo.slotTime.filter(el => !!el).map(el => el * 1000);
        const queryOrderPlatforms = [];
        if (res.data.queryOrderPlatforms && res.data.queryOrderPlatforms.length) {
          res.data.queryOrderPlatforms.map(el => { // 平台信息
            if (typeof el.cooperationFormId === 'number') { // 处理旧数据
              el.cooperationFormId = [el.cooperationFormId];
            }
            queryOrderPlatforms.push({
              _uuid: generateUUID(),
              queryOrderPlatforms: {
                platformId: el.platformId,
                cooperationFormId: el.cooperationFormId.split(',').map(i => Number(i)),
                cooperationForm: el.cooperationForm.split(',')
              }
            });
          });
          this.formInfo.queryOrderPlatforms = queryOrderPlatforms;
        } else {
          this.formInfo.queryOrderPlatforms = [];
          this.addPlatform();
        }
        delete this.formInfo.tag;
        this.formInfo.tagName = res.data.tagName.map(el => el.id);
        // 回填已选账号
        this.$refs['flyLinkedAccountRef'].setAccountData(this.formInfo.queryOrderAdvises || []);
      }).catch(err => {
        console.log(err);
      });
    },
    // 标签
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.FLY_NOTICE };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    // 获取部门列表
    queryDeptTreeList(sort = false) {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    // 下一步
    isPlatFormValid() {
      const promise = [];
      this.formInfo.queryOrderPlatforms.forEach(el => {
        const platform = this.getValidateForm(`platform-${el._uuid}`);
        platform && promise.push(platform.isValidate());
      });
      return new Promise((resolve, reject) => {
        Promise.all(promise).then(res => {
          resolve(res);
        }).catch(() => {
          reject();
        });
      });
    },
    // 校验
    handleValidate() {
      this.$refs['formInfo'].validate(valid => {
        const selectedAccountArr = this.$refs['flyLinkedAccountRef'].selectedData;
        this.isPlatFormValid().then(res => {
          if (valid) {
            if (!this.$refs['flyLink'].validate()) {
              return;
            }
            if (!this.$refs['remarkInput'].validate()) {
              return;
            }
            if (!selectedAccountArr || !selectedAccountArr.length) {
              ElMessage.warning('请选择询单账号');
              return;
            }
            showModal('确定发起询单？', '', {
              iconClass: 'del-icon'
            }).then(() => {
              this.submit(selectedAccountArr);
            }).catch(() => {
              return false;
            });
          } else {
            this.$message.warning('请检查信息是否完整');
          }
        }).catch(() => { this.$message.warning('请检查信息是否完整'); });
      });
    },
    getValidateForm(refName) {
      if (!this.$refs[refName]) return null;
      if (Array.isArray(this.$refs[refName]) && this.$refs[refName][0]) {
        return this.$refs[refName][0];
      } else {
        return this.$refs[refName];
      }
    },
    // 保存草稿
    saveDraft() {
      showModal('是否保存草稿?', '', {
        iconClass: 'del-icon'
      }).then(() => {
        this.submit(this.$refs['flyLinkedAccountRef'].selectedData, true);
      }).catch(() => {
        return false;
      });
    },
    // 提交
    submit(data = [], isDraft = false) {
      const params = this.getParams(data, isDraft);
      if (this.id && !this.isCreateNew && !isDraft) {
        const objDiff = this.contrastRemark(params.remarks, this.remarkCache);
        params.hasEdited = objDiff;
        this.edit(params);
      } else {
        this.add(params, isDraft);
      }
    },
    getParams(data = [], isDraft = false) {
      const params = _.cloneDeep(this.formInfo);
      params.queryOrderAdvises = [];
      data.forEach(el => {
        params.queryOrderAdvises.push({
          wxUserId: el.wxUserId,
          accountId: el.accountId,
          accountName: el.accountName
        });
      });
      if (isDraft) { params.isDraft = true; }
      if (params.slotTime && params.slotTime.length === 2) {
        params.slotStartTime = params.slotTime[0] / 1000;
        params.slotEndTime = params.slotTime[1] / 1000;
      }
      if (params.queryOrderEndTime) {
        params.queryOrderEndTime = params.queryOrderEndTime / 1000;
      }
      delete params.slotTime;
      if (params.tagName) {
        params.tagName = params.tagName.join(',');
      }
      if (params.queryOrderPlatforms && params.queryOrderPlatforms.length) {
        let queryOrderPlatforms = params.queryOrderPlatforms.map(el => el.queryOrderPlatforms).filter(j => !!j.platformId);// 平台信息
        // 合并相同平台及合作形式
        queryOrderPlatforms = queryOrderPlatforms.reduce((a, b) => {
          const findIndex = a.findIndex((item) => item.platformId === b.platformId);
          if (findIndex > -1) {
            a[findIndex].cooperationFormId = [...new Set(a[findIndex].cooperationFormId.concat(b.cooperationFormId))];
          } else {
            a.push(b);
          }
          return a;
        }, []);
        queryOrderPlatforms.map(i => {
          i.cooperationFormId = i.cooperationFormId ? i.cooperationFormId.join(',') : '';
        });
        params.queryOrderPlatforms = queryOrderPlatforms;
      }
      const reg = /(http|https):\/\//;
      params.linkList.map(el => { el.url = reg.test(el.url) ? el.url : `${el.urlPrepend}${el.url}`; });// 处理链接
      params.hasEdited = false;
      return params;
    },
    // 对比备注是否编辑过
    contrastRemark(remark, cache) {
      let objDiff = false;
      // 数量不一致
      if (remark.length !== cache.length) {
        objDiff = true;
        return objDiff;
      }
      // 数量一致，对比内容
      const len = remark.length;
      for (let i = 0; i < len; i++) {
        const obj1 = remark[i];
        const obj2 = cache[i];
        const keys1 = Object.keys(obj1);
        const keys2 = Object.keys(obj2);
        if (keys1.length !== keys2.length) { // 判断两个对象的属性数量是否相同
          objDiff = true;
          break;
        }
        for (const key of keys1) { // 遍历两个对象的属性进行比较
          if (Array.isArray(obj1[key])) { // selectList是数组,数组需要递归对比
            const arrDiff = this.contrastRemark(obj1[key], obj2[key]);
            objDiff = arrDiff;
            if (arrDiff) break;
          } else if (obj1[key] !== obj2[key]) {
            objDiff = true;
            break;
          }
        }
        if (objDiff) break;
      }
      return objDiff;
    },
    handleLinks(formInfo = this.formInfo) {
      const reg = /(http|https):\/\//;
      formInfo.linkList.map(el => {
        el._uuid = generateUUID();
        this.$set(el, 'urlPrepend', el.url.match(reg)[0]);
        el.url = el.url.replace(reg, '');
      });
    },
    add(params = {}, isDraft = false) {
      if (params.id && (!isDraft || this.isCreateNew)) {
        delete params.id;
      }
      if (params.sn && this.isCreateNew) {
        delete params.sn;
      }
      isDraft ? this.draftLoading = true : this.addLoading = true;
      queryOrderCreate(params).then(res => {
        if (res.code === 200) {
          if (isDraft) {
            this.$router.push({
              name: 'flyNotice'
            });
          } else {
            this.$router.push({
              name: 'flyNoticeDetail',
              query: {
                id: res.data
              }
            });
          }
          ss.remove('flyNoticeCache');
        }
        isDraft ? this.draftLoading = false : this.addLoading = false;
      }).catch(err => {
        isDraft ? this.draftLoading = false : this.addLoading = false;
        this.$refs['flyLinkedAccountRef'].clearLoading();
        console.log(err);
      });
    },
    edit(params) {
      queryOrderEdit(this.id, params).then(res => {
        if (res.code === 200) {
          this.$router.push({
            name: 'flyNoticeDetail',
            query: {
              id: this.id
            }
          });
          ss.remove('flyNoticeCache');
        }
      }).catch(err => {
        this.$refs['flyLinkedAccountRef'].clearLoading();
        console.log(err);
      });
    },
    addPlatform() {
      const data = {
        _uuid: generateUUID(),
        queryOrderPlatforms: {
          platformId: '',
          cooperationFormId: []
        }
      };
      this.formInfo.queryOrderPlatforms.push(data);
    },
    deleteItem(index) {
      this.formInfo.queryOrderPlatforms.splice(index, 1);
    },
    complateSetData({ data, fileName }, key) {
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      if (this.formInfo[key]) {
        this.formInfo[key].push(fileList);
      } else {
        this.$set(this.formInfo, key, [fileList]);
      }
      this.handleChangeCache();
    },
    removeFileList({ file, index }, key) {
      this.formInfo[key].splice(index, 1);
    },
    toBack() {
      if (this.$route.meta.isDetail) {
        this.$router.push({
          name: 'flyNoticeDetail',
          query: {
            id: this.id
          }
        });
        return;
      }
      this.$router.push({
        name: 'flyNotice'
      });
    },
    addItem(key = 'link') {
      if (key === 'link') {
        this.formInfo.linkList.push({
          name: '',
          url: '',
          autofocus: true,
          urlPrepend: 'http://',
          _uuid: generateUUID()
        });
      } else {
        if (this.formInfo && this.formInfo.remarks.length >= 50) {
          this.$message.warning('最多可添加50个问题');
          return;
        }
        this.formInfo.remarks.push({
          type: 0,
          autofocus: true,
          _uuid: generateUUID(),
          required: 1,
          content: '',
          placeholder: '用户可输入回复该问题',
          selectList: []
        });
      }
      this.handleChangeCache();
    },
    toDelete(index, key = 'link') {
      if (key === 'link') {
        this.formInfo.linkList.splice(index, 1);
      } else {
        this.formInfo.remarks.splice(index, 1);
      }
      this.handleChangeCache();
    }
  }
};
</script>
<style lang="scss" scoped>
.sign-detail-container{
		margin:	16px 16px 0;
		background: #fff;
		min-height: calc(100vh - 64px);
    padding-bottom: 56px;
		.sign-detail-content{
      padding: 16px 24px 0 0;
      &::v-deep {
        .el-form-item__label{
          color:#666666;
        }
      }
		}
    .width240 {
      width: 240px;
      &::v-deep {
        .el-select {
          width: 240px;
        }
        .el-tag{
          color: #406EFF;
          background: #EFF3FB;
        }
        .el-input__inner {
          width: 240px;
        }
       .el-textarea__inner{
          height: 88px;
        }
      }
    }
    .empty-btn-style {
      border-color: #406EFF;
      background: #fff;
      color: #406EFF;
    }
    &::v-deep{
      .el-radio {
        .el-radio__label {
          font-size: 14px;
        }
      }
    }
	}
.mobile-create {
  border-radius: 6px;
  .sign-detail-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  &::v-deep {
    .el-form-item__label {
      color: #999 !important;
    }
  }
}
.grey-label {
  &::v-deep {
    .el-form-item__label {
      color: #999 !important;
    }
  }
}
.countdown-check {
  height: 22px;
  line-height: 22px;
  &::v-deep {
    .el-checkbox__label {
      font-size: 12px;
      padding-left: 4px;
      color: #666;
    }
    .el-checkbox {
      color: #333;
    }
  }
}
.save-info {
  width: 132px;
  font-size: 12px;
  color: #999;
  p {
    margin: 0;
    white-space: nowrap;
  }
}
</style>
<style lang="scss">
.countdown-picker {
  .el-button--text {
    display: none;
  }
}
</style>
